document.writeln("<!-- Root element of PhotoSwipe. Must have class pswp. -->");
document.writeln("<div class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">");
document.writeln("");
document.writeln("    <!-- Background of PhotoSwipe.");
document.writeln("         It\'s a separate element as animating opacity is faster than rgba(). -->");
document.writeln("    <div class=\"pswp__bg\"><\/div>");
document.writeln("");
document.writeln("    <!-- Slides wrapper with overflow:hidden. -->");
document.writeln("    <div class=\"pswp__scroll-wrap\">");
document.writeln("");
document.writeln("        <!-- Container that holds slides.");
document.writeln("            PhotoSwipe keeps only 3 of them in the DOM to save memory.");
document.writeln("            Don\'t modify these 3 pswp__item elements, data is added later on. -->");
document.writeln("        <div class=\"pswp__container\">");
document.writeln("            <div class=\"pswp__item\"><\/div>");
document.writeln("            <div class=\"pswp__item\"><\/div>");
document.writeln("            <div class=\"pswp__item\"><\/div>");
document.writeln("        <\/div>");
document.writeln("");
document.writeln("        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->");
document.writeln("        <div class=\"pswp__ui pswp__ui--hidden\">");
document.writeln("");
document.writeln("            <div class=\"pswp__top-bar\">");
document.writeln("");
document.writeln("                <!--  Controls are self-explanatory. Order can be changed. -->");
document.writeln("");
document.writeln("                <div class=\"pswp__counter\"><\/div>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--close\" title=\"Close (Esc)\"><\/button>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--share\" title=\"Share\"><\/button>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--fs\" title=\"Toggle fullscreen\"><\/button>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--zoom\" title=\"Zoom in\/out\"><\/button>");
document.writeln("");
document.writeln("                <!-- Preloader demo http:\/\/codepen.io\/dimsemenov\/pen\/yyBWoR -->");
document.writeln("                <!-- element will get class pswp__preloader--active when preloader is running -->");
document.writeln("                <div class=\"pswp__preloader\">");
document.writeln("                    <div class=\"pswp__preloader__icn\">");
document.writeln("                        <div class=\"pswp__preloader__cut\">");
document.writeln("                            <div class=\"pswp__preloader__donut\"><\/div>");
document.writeln("                        <\/div>");
document.writeln("                    <\/div>");
document.writeln("                <\/div>");
document.writeln("            <\/div>");
document.writeln("");
document.writeln("            <div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\">");
document.writeln("                <div class=\"pswp__share-tooltip\"><\/div>");
document.writeln("            <\/div>");
document.writeln("");
document.writeln("            <button class=\"pswp__button pswp__button--arrow--left\" title=\"Previous (arrow left)\">");
document.writeln("            <\/button>");
document.writeln("");
document.writeln("            <button class=\"pswp__button pswp__button--arrow--right\" title=\"Next (arrow right)\">");
document.writeln("            <\/button>");
document.writeln("");
document.writeln("            <div class=\"pswp__caption\">");
document.writeln("                <div class=\"pswp__caption__center\"><\/div>");
document.writeln("            <\/div>");
document.writeln("");
document.writeln("        <\/div>");
document.writeln("");
document.writeln("    <\/div>");
document.writeln("");
document.writeln("<\/div>");

var ParseThumbnailElements = function (gallerySelector) {
            this.items=[];
            var slef=this;
            var domelement = document.querySelectorAll(gallerySelector)[0];
            var figuredoms = domelement.children;
            
            for (var i = 0; i < figuredoms.length; i++) {
                var figureEl=figuredoms[i];
                var linkEl=figuredoms[i].children[0].children[0]; //a标签
                var title;
                var el;
                var msrc;
                
                if (figureEl.children.length > 1) {
                    title = figureEl.children[1].innerHTML||'';
                }
                if (linkEl.children.length > 0) {
                       msrc = linkEl.children[0].getAttribute('src')||'';
                    }
                this.items.push({
                    src: linkEl.getAttribute('href'),
                    title:title,
                    el:figureEl,
                    msrc:msrc,
                    w: 0,
                    h: 0
                })
            }
            var j = 0;
            this.items.forEach(function (item) {
                var img = new Image();
                img.src = item.src;
                img.onload = function () {
                    item.w = img.naturalWidth;
                    item.h = img.naturalHeight;
                    j++;
                    // console.log(j == slef.items.length); 当图片信息全部加载完再调用initPhotoSwipeFromDOM
                    if (j == slef.items.length) {
                        initPhotoSwipeFromDOM(gallerySelector, slef.items)
                    }
                }
            })
            var initPhotoSwipeFromDOM = function (gallerySelector) {
              
                // 查找最近的父节点
                var closest = function closest(el, fn) {
                    return el && (fn(el) ? el : closest(el.parentNode, fn));
                };
                // 当用户点击缩略图触发
                var onThumbnailsClick = function (e) {
                    e = e || window.event;
                    e.preventDefault ? e.preventDefault() : e.returnValue = false;
                    var eTarget = e.target || e.srcElement;

                    var clickedListItem = closest(eTarget, function (el) {
                        return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
                    });

                    if (!clickedListItem) {
                        return;
                    }
                    var clickedGallery = clickedListItem.parentNode,
                        childNodes = clickedListItem.parentNode.childNodes,
                        numChildNodes = childNodes.length,
                        nodeIndex = 0,
                        index;
                    for (var i = 0; i < numChildNodes; i++) {
                        if (childNodes[i].nodeType !== 1) {
                            continue;
                        }
                        if (childNodes[i] === clickedListItem) {
                            index = nodeIndex;
                            break;
                        }
                        nodeIndex++;
                    }
                    if (index >= 0) {
                        openPhotoSwipe(index, clickedGallery);
                    }
                    return false;
                };

                var photoswipeParseHash = function () {
                    var hash = window.location.hash.substring(1),
                        params = {};
                    if (hash.length < 5) {
                        return params;
                    }
                    var vars = hash.split('&');
                    for (var i = 0; i < vars.length; i++) {
                        if (!vars[i]) {
                            continue;
                        }
                        var pair = vars[i].split('=');
                        if (pair.length < 2) {
                            continue;
                        }
                        params[pair[0]] = pair[1];
                    }
                    if (params.gid) {
                        params.gid = parseInt(params.gid, 10);
                    }
                    return params;
                };

                var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {

                    var pswpElement = document.querySelectorAll('.pswp')[0],
                        gallery,
                        options,
                        items;
                    items = slef.items;


                    // 这里可以定义参数
                    options = {
                        barsSize: {
                            top: 100,
                            bottom: 100
                        },
                        fullscreenEl: false,
                        shareButtons: [
                            { id: 'wechat', label: '分享微信', url: '#' },
                            { id: 'weibo', label: '新浪微博', url: '#' },
                            { id: 'download', label: '保存图片', url: '{{raw_image_url}}', download: true }
                        ],
                        galleryUID: galleryElement.getAttribute('data-pswp-uid'),
                        getThumbBoundsFn: function (index) {
                            var thumbnail = slef.items[index].el.getElementsByTagName('img')[0], // find thumbnail
                                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                                rect = thumbnail.getBoundingClientRect();
                            return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
                        }
                    };
                    if (fromURL) {
                        if (options.galleryPIDs) {
                            for (var j = 0; j < items.length; j++) {
                                if (items[j].pid == index) {
                                    options.index = j;
                                    break;
                                }
                            }
                        } else {
                            options.index = parseInt(index, 10) - 1;
                        }
                    } else {
                        options.index = parseInt(index, 10);
                    }
                    if (isNaN(options.index)) {
                        return;
                    }
                    if (disableAnimation) {
                        options.showAnimationDuration = 0;
                    }
                    gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, slef.items, options);
                    gallery.init();


                };

                var galleryElements = document.querySelectorAll(gallerySelector);
                for (var i = 0; i < galleryElements.length; i++) {
                    galleryElements[i].setAttribute('data-pswp-uid', i + 1);
                    galleryElements[i].onclick = onThumbnailsClick;
                }
                var hashData = photoswipeParseHash();

                if (hashData.pid && hashData.gid) {
                    openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
                }


            }


        }
		
		
			var ParseThumbnailElements = function (gallerySelector) {
            this.items=[];
            var slef=this;
            var domelement = document.querySelectorAll(gallerySelector)[0];
            var figuredoms = domelement.children;
            
            for (var i = 0; i < figuredoms.length; i++) {
                var figureEl=figuredoms[i];
                var linkEl=figuredoms[i].children[0].children[0]; //a标签
                var title;
                var el;
                var msrc;
                
                if (figureEl.children.length > 1) {
                    title = figureEl.children[1].innerHTML||'';
                }
                if (linkEl.children.length > 0) {
                       msrc = linkEl.children[0].getAttribute('src')||'';
                    }
                this.items.push({
                    src: linkEl.getAttribute('href'),
                    title:title,
                    el:figureEl,
                    msrc:msrc,
                    w: 0,
                    h: 0
                })
            }
            var j = 0;
            this.items.forEach(function (item) {
                var img = new Image();
                img.src = item.src;
                img.onload = function () {
                    item.w = img.naturalWidth;
                    item.h = img.naturalHeight;
                    j++;
                    // console.log(j == slef.items.length); 当图片信息全部加载完再调用initPhotoSwipeFromDOM
                    if (j == slef.items.length) {
                        initPhotoSwipeFromDOM(gallerySelector, slef.items)
                    }
                }
            })
            var initPhotoSwipeFromDOM = function (gallerySelector) {
              
                // 查找最近的父节点
                var closest = function closest(el, fn) {
                    return el && (fn(el) ? el : closest(el.parentNode, fn));
                };
                // 当用户点击缩略图触发
                var onThumbnailsClick = function (e) {
                    e = e || window.event;
                    e.preventDefault ? e.preventDefault() : e.returnValue = false;
                    var eTarget = e.target || e.srcElement;

                    var clickedListItem = closest(eTarget, function (el) {
                        return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
                    });

                    if (!clickedListItem) {
                        return;
                    }
                    var clickedGallery = clickedListItem.parentNode,
                        childNodes = clickedListItem.parentNode.childNodes,
                        numChildNodes = childNodes.length,
                        nodeIndex = 0,
                        index;
                    for (var i = 0; i < numChildNodes; i++) {
                        if (childNodes[i].nodeType !== 1) {
                            continue;
                        }
                        if (childNodes[i] === clickedListItem) {
                            index = nodeIndex;
                            break;
                        }
                        nodeIndex++;
                    }
                    if (index >= 0) {
                        openPhotoSwipe(index, clickedGallery);
                    }
                    return false;
                };

                var photoswipeParseHash = function () {
                    var hash = window.location.hash.substring(1),
                        params = {};
                    if (hash.length < 5) {
                        return params;
                    }
                    var vars = hash.split('&');
                    for (var i = 0; i < vars.length; i++) {
                        if (!vars[i]) {
                            continue;
                        }
                        var pair = vars[i].split('=');
                        if (pair.length < 2) {
                            continue;
                        }
                        params[pair[0]] = pair[1];
                    }
                    if (params.gid) {
                        params.gid = parseInt(params.gid, 10);
                    }
                    return params;
                };

                var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {

                    var pswpElement = document.querySelectorAll('.pswp')[0],
                        gallery,
                        options,
                        items;
                    items = slef.items;


                    // 这里可以定义参数
                    options = {
                        barsSize: {
                            top: 100,
                            bottom: 100
                        },
						loop:false,
                        fullscreenEl: false,
                        shareButtons: [
                            { id: 'wechat', label: '分享微信', url: '#' },
                            { id: 'weibo', label: '新浪微博', url: '#' },
                            { id: 'download', label: '保存图片', url: '{{raw_image_url}}', download: true }
                        ],
                        galleryUID: galleryElement.getAttribute('data-pswp-uid'),
                        getThumbBoundsFn: function (index) {
                            var thumbnail = slef.items[index].el.getElementsByTagName('img')[0], // find thumbnail
                                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                                rect = thumbnail.getBoundingClientRect();
                            return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
                        }
                    };
                    if (fromURL) {
                        if (options.galleryPIDs) {
                            for (var j = 0; j < items.length; j++) {
                                if (items[j].pid == index) {
                                    options.index = j;
                                    break;
                                }
                            }
                        } else {
                            options.index = parseInt(index, 10) - 1;
                        }
                    } else {
                        options.index = parseInt(index, 10);
                    }
                    if (isNaN(options.index)) {
                        return;
                    }
                    if (disableAnimation) {
                        options.showAnimationDuration = 0;
                    }
                    gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, slef.items, options);
                    gallery.init();


                };

                var galleryElements = document.querySelectorAll(gallerySelector);
                for (var i = 0; i < galleryElements.length; i++) {
                    galleryElements[i].setAttribute('data-pswp-uid', i + 1);
                    galleryElements[i].onclick = onThumbnailsClick;
                }
                var hashData = photoswipeParseHash();

                if (hashData.pid && hashData.gid) {
                    openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
                }


            }


        }
		
		  new ParseThumbnailElements('.my-gallery')